<template>
	<div>

		<tiny-drawer
			dragable
			:title="config.name"
			:visible="config.visiableFlag"
			:show-close="false"
			@update:visible="config.visiableFlag = $event"
			:mask="false"
			:show-footer="false"
			:z-index="100"
			:mask-closable="false"
			placement="bottom"
		>
			<template #header-right>
				<DownCircleOutlined height="2em" width="2em" @click="config.visiableFlag = false"/>
			</template>
			<a-flex gap="0" horizontal style="height: 100%" class="parent">
				<a-card v-if="config.toolbarViewFlag" :bodyStyle="{ height: '100%', padding: '0' }" :bordered="false">
					<a-space direction="vertical">
						<a-tooltip title="运行" @click="run()" placement="topLeft">
							<svg
								t="1671007269955"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="2972"
								width="20"
								height="20"
							>
								<path
									d="M924.8 337.6a449.344 449.344 0 1 0-828.288 348.8 449.344 449.344 0 0 0 828.288-348.8z m-149.76 437.376A371.968 371.968 0 1 1 883.968 512a369.536 369.536 0 0 1-109.056 263.04z m-64.768-302.08l-233.28-178.56a48 48 0 0 0-77.184 38.08v357.184a48 48 0 0 0 77.184 38.144l233.28-178.624a48 48 0 0 0 0-76.224z"
									fill="#000000"
									p-id="2973"
								></path>
							</svg>
						</a-tooltip>

						<a-tooltip title="恢复" @click="resume" placement="topLeft">
							<svg
								t="1704853471886"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="3898"
								width="20"
								height="20"
							>
								<path
									d="M512 1024c-281.6 0-512-230.4-512-512s230.4-512 512-512 512 230.4 512 512S793.6 1024 512 1024zM512 57.6C262.4 57.6 57.6 262.4 57.6 512s204.8 454.4 454.4 454.4 454.4-204.8 454.4-454.4S761.6 57.6 512 57.6z"
									fill="#2c2c2c"
									p-id="3899"
								></path>
								<path d="M512 332.8 832 512l-320 179.2L512 332.8z" fill="#2c2c2c" p-id="3900"></path>
								<path d="M384 320l64 0 0 384-64 0 0-384Z" fill="#2c2c2c" p-id="3901"></path>
							</svg>
						</a-tooltip>

						<a-tooltip title="重置参数" @click="resetParamFunc" placement="topLeft">
							<svg
								t="1704879538972"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="5496"
								width="20"
								height="20"
							>
								<path
									d="M867.28192 302.39744c-46.34112-72.25344-114.41152-127.00672-196.84864-158.34624a427.76064 427.76064 0 0 0-57.74848-17.39264l14.27456-9.23136c9.44128-6.10304 15.83616-15.44704 18.01728-26.31168a40.0128 40.0128 0 0 0-6.30784-30.73024c-7.79264-11.37664-20.81792-18.16576-34.8416-18.16576a42.3424 42.3424 0 0 0-23.08096 6.80448L463.81056 124.63104c-1.28 0.8192-2.49856 1.70496-3.59936 2.59072a25.22112 25.22112 0 0 0-0.98304 0.8448 42.42944 42.42944 0 0 0-2.24768 2.048 41.1392 41.1392 0 0 0-1.1264 1.18784c-0.56832 0.6144-1.13152 1.23392-1.67936 1.8944a46.90432 46.90432 0 0 0-3.42528 4.8384c-0.4608 0.74752-0.88576 1.52064-1.37728 2.46784l-0.64 1.27488c-0.43008 0.9216-0.82944 1.85856-1.18784 2.81088l-0.40448 1.07008a41.8816 41.8816 0 0 0-0.9472 3.14368l-0.26112 0.97792c-0.26112 1.1264-0.47104 2.26816-0.63488 3.42016l-0.2048 1.49504a39.7312 39.7312 0 0 0-0.06144 7.87968l0.0768 0.67072c0.03072 0.26624 0.0768 0.53248 0.12288 0.82432 0.13312 1.03424 0.2816 2.06336 0.47616 2.98496 0.0768 0.37888 0.16896 0.74752 0.29184 1.21856 0.25088 1.03424 0.51712 2.05824 0.82944 3.02592 0.1024 0.31744 0.21504 0.63488 0.38912 1.08032 0.36352 1.024 0.74752 2.02752 1.13664 2.88256 0.16384 0.37376 0.34304 0.74752 0.5632 1.17248 0.44544 0.92672 0.9216 1.8432 1.46944 2.78528l0.67072 1.09568a39.17824 39.17824 0 0 0 4.1472 5.50912l84.992 90.0608a42.4448 42.4448 0 0 0 30.7968 13.17888 42.36288 42.36288 0 0 0 28.21632-10.69056c8.32512-7.424 13.16352-17.57696 13.63456-28.58496a40.16128 40.16128 0 0 0-11.08992-29.54752l-14.19264-15.03744a339.38432 339.38432 0 0 1 52.52608 15.2832c132.39296 50.32448 213.98016 175.07328 203.01312 310.41024a40.18176 40.18176 0 0 0 9.60512 29.53216 41.89184 41.89184 0 0 0 28.9024 14.592c1.11104 0.09216 2.21184 0.12288 3.30752 0.12288 21.69344 0 40.02304-16.58368 41.73312-37.75488 6.5792-81.54112-14.4896-164.99712-59.3664-234.99264z m-277.08416 550.7072l0.01024-0.28672-0.08704-0.53248a23.04 23.04 0 0 0-0.24576-1.8688 32.8704 32.8704 0 0 0-0.77824-4.13696 43.59168 43.59168 0 0 0-0.74752-2.69312l-0.43008-1.2288a36.9408 36.9408 0 0 0-1.16224-2.88768l-0.51712-1.10592a42.0352 42.0352 0 0 0-1.59744-2.95424l-0.4608-0.75776a45.16352 45.16352 0 0 0-1.94048-2.85696l-0.49152-0.65024a38.8352 38.8352 0 0 0-2.26816-2.67264l-0.50688-0.54784a40.064 40.064 0 0 0-3.54304-3.30752l-93.63456-79.32928a42.368 42.368 0 0 0-27.4176-10.0096 42.28096 42.28096 0 0 0-31.49312 13.94688 40.1408 40.1408 0 0 0-10.33216 29.78304 40.20736 40.20736 0 0 0 8.38144 22.02112 331.30496 331.30496 0 0 1-20.64384-7.07072c-124.99456-47.50336-205.04576-161.08032-203.95008-289.34144 0.09216-11.008-4.21888-21.376-12.1344-29.19936-7.83872-7.74144-18.28864-12.05248-29.7728-12.14464-22.91712 0-41.71264 18.24256-41.9072 40.65792-0.66048 78.08 22.8352 153.8816 67.95264 219.21792 46.08 66.72896 111.59552 117.64736 189.4656 147.24096a425.99424 425.99424 0 0 0 70.58432 20.08064l-26.53184 21.62176c-8.66816 7.06048-13.97248 17.00352-14.93504 28.00128a40.15616 40.15616 0 0 0 9.74336 29.97248 42.22976 42.22976 0 0 0 32.0256 14.53568 42.52672 42.52672 0 0 0 26.79808-9.49248l107.78112-87.81824 0.62464-0.56832a40.30976 40.30976 0 0 0 7.58272-8.63744l0.74752-1.15712c0.47104-0.768 0.90112-1.57696 1.44384-2.6112l0.55296-1.08032c0.47616-1.00864 0.90112-2.03776 1.24928-2.9696l0.36352-0.9216c0.9728-2.77504 1.64352-5.64224 2.00704-8.56064 0.04608-0.32256 0.06656-0.64512 0.08704-0.96256 0.09728-0.93184 0.1536-1.85856 0.18432-2.7904l0.03072-0.68096c0-0.61952-0.02048-1.23392-0.07168-1.84832a11.56608 11.56608 0 0 0-0.01536-1.39776z m-401.152-405.05856h164.93056c46.70464 0 84.70016-36.64896 84.70016-81.69472V208.6144c0-45.04064-37.99552-81.6896-84.70016-81.6896H189.04576c-46.70464 0-84.70016 36.64384-84.70016 81.6896v157.73696c0 45.04576 38.00064 81.69472 84.70016 81.69472zM177.92 208.6144c0-5.28896 5.1968-9.92256 11.12576-9.92256h164.93056c5.92896 0 11.12576 4.63872 11.12576 9.92256v157.73696c0 5.29408-5.1968 9.9328-11.12576 9.9328H189.04576c-5.92896 0-11.12576-4.64384-11.12576-9.9328V208.6144z m662.0416 392.064h-164.93056c-26.34752 0-47.90784 20.63872-47.90784 45.80864v157.75744c0 25.18528 21.56032 45.824 47.90784 45.824h164.93056c26.36288 0 47.91296-20.63872 47.91296-45.824v-157.75744c0-25.1648-21.55008-45.80864-47.91296-45.80864z"
									fill="#2c2c2c"
									p-id="5497"
								></path>
							</svg>
						</a-tooltip>

						<a-tooltip title="恢复所有" @click="resumeAll" placement="topLeft">
							<svg
								t="1704855986001"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="4450"
								width="20"
								height="20"
							>
								<path
									d="M512.474074 937.244444c-55.371852 0-109.131852-10.903704-159.762963-32.237037-48.924444-20.66963-92.728889-50.251852-130.465185-87.988148s-67.318519-81.635556-87.988148-130.465185c-21.428148-50.631111-32.237037-104.391111-32.237037-159.857778 0-11.757037 9.576296-21.333333 21.333333-21.333333s21.333333 9.576296 21.333333 21.333333c0 202.903704 164.977778 367.881481 367.786667 367.881482s367.786667-165.072593 367.786667-367.881482c0-202.903704-164.977778-367.881481-367.786667-367.881481-113.114074 0-218.358519 51.01037-288.616296 139.851852-7.300741 9.197037-20.764444 10.808889-29.961482 3.508148-9.197037-7.300741-10.808889-20.764444-3.508148-29.961482 37.641481-47.597037 86.091852-86.85037 140.231111-113.682963 56.794074-28.16 118.044444-42.382222 181.854815-42.382222 55.371852 0 109.131852 10.903704 159.762963 32.237037 48.924444 20.66963 92.728889 50.251852 130.465185 87.988148 37.641481 37.736296 67.318519 81.635556 87.988148 130.465186 21.428148 50.631111 32.237037 104.391111 32.237037 159.857777 0 55.371852-10.808889 109.226667-32.237037 159.857778-20.66963 48.924444-50.251852 92.823704-87.988148 130.465185-37.736296 37.736296-81.540741 67.318519-130.465185 87.988148-50.631111 21.333333-104.391111 32.237037-159.762963 32.237037z"
									p-id="4451"
								></path>
								<path
									d="M207.075556 306.820741c-11.757037 0-21.333333-9.576296-21.333334-21.333334V105.244444c0-11.757037 9.576296-21.333333 21.333334-21.333333s21.333333 9.576296 21.333333 21.333333v180.242963c0 11.757037-9.481481 21.333333-21.333333 21.333334z"
									p-id="4452"
								></path>
								<path
									d="M387.318519 306.820741H207.075556c-11.757037 0-21.333333-9.576296-21.333334-21.333334s9.576296-21.333333 21.333334-21.333333h180.242963c11.757037 0 21.333333 9.576296 21.333333 21.333333s-9.576296 21.333333-21.333333 21.333334z"
									p-id="4453"
								></path>
							</svg>
						</a-tooltip>
					</a-space>
				</a-card>

				<a-card v-if="config.paramViewFlag"
						class="child paramInputCard"
						:style="paramInputCardStyle">
					<div ref="paramContainer" style="width: 100%; height: 100%; text-align: left"></div>
				</a-card>

				<a-card :style="logCardStyle">
					<ProcessLogView ref="processLogView" :lf="lf"></ProcessLogView>
					<!--				//	<div ref="logContainer" style="width: 100%; height: 100%; text-align: left"></div>-->
				</a-card>
			</a-flex>
		</tiny-drawer>

		<a-float-button
			type="default"
			:style="{
				right: '20px'
			}"
			v-if="!props.config || props.config?.openViewFlag"
		>
			<template #icon>
				<a-tooltip title="运行" @click="openRunDraw(null)" placement="topLeft">
					<svg
						t="1670114179946"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="4958"
						width="20"
						height="20"
					>
						<path
							d="M688 80v44.992a180.672 180.672 0 0 0-72.992 30.016l-33.024-31.008-44 47.008 32 29.984a180 180 0 0 0-28.992 71.008H496v64h44.992c4.672 26.528 15.168 50.752 30.016 72l-34.016 32.992 46.016 46.016 32.992-34.016a179.776 179.776 0 0 0 72 30.016V528h64v-44.992a180 180 0 0 0 71.008-28.992l29.984 32 47.008-44.032-31.008-32.96c15.072-21.44 25.28-46.24 30.016-73.024H944v-64h-44.992a179.776 179.776 0 0 0-30.016-72l30.016-30.016-45.024-44.992-29.984 30.016a179.776 179.776 0 0 0-72-30.016V80h-64z m32 106.016A117.248 117.248 0 0 1 838.016 304a117.248 117.248 0 0 1-118.016 118.016A117.248 117.248 0 0 1 601.984 304 117.248 117.248 0 0 1 720 185.984zM304.992 374.976l-59.008 24 23.04 57.984a221.12 221.12 0 0 0-75.04 74.016l-56.96-23.008-24 59.008 56.96 22.976a216.832 216.832 0 0 0-6.976 53.024c0 18.24 2.72 36.032 6.976 52.992l-56.96 23.008 24 58.976 56.96-22.976a219.872 219.872 0 0 0 75.008 74.976l-23.008 57.024 59.008 24 23.008-57.024a215.36 215.36 0 0 0 52.992 7.04c18.24 0 36.096-2.752 52.992-7.04l23.04 57.024 58.976-24-23.008-57.024a221.12 221.12 0 0 0 74.016-74.976l57.984 22.976 24-58.976-57.984-23.008c4.224-16.96 6.976-34.784 6.976-52.992 0-18.24-2.752-36.096-6.976-53.024l57.984-22.976-24-59.008-57.984 23.008a220 220 0 0 0-74.016-74.016l23.008-57.984-59.008-24-23.008 57.984a216.896 216.896 0 0 0-52.992-7.008c-18.24 0-36.032 2.784-52.992 7.04l-23.008-58.016z m76 115.008a152.096 152.096 0 0 1 152.992 152.96c0 85.248-67.776 154.016-152.96 154.016a153.792 153.792 0 0 1-154.016-153.984c0-85.216 68.8-153.024 153.984-153.024z"
							p-id="4959"
						></path>
					</svg>
				</a-tooltip>
			</template>
		</a-float-button>
	</div>
</template>

<script setup>
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import * as monaco from 'monaco-editor'
import processVersionContentApi from '@/api/process/processVersionContentApi'
import ProcessLogView from '@/views/process/engine/processLogView.vue'
import {parseDefineToJson} from '@/utils'
import {message} from 'ant-design-vue'
import processTestApi from '@/api/process/processTestApi'
import {Ws} from './Ws.js'
import {SocketD} from '@noear/socket.d'


const props = defineProps(['lf', 'config'])
const processLogView = ref();
const config = ref({
	visiableFlag: false,
	name: '',
	paramViewFlag: true,
	openOutputResultFlag: false,
	running: false,
	toolbarViewFlag: true,
	ws: null,
	tid: null,
	logContainerConfig: {
		width: "68%"
	}
})
const openRunDraw = async (tid) => {
	if (tid) {
		config.value.tid = tid
	}

	config.value.visiableFlag = true
	await setDefaultParamValue()
	await connectTestWebSocket()

	// logCardStyle.value.height = '100%'
}

const paramInputCardStyle = ref({
	width: '30%'
})
const logCardStyle = ref({
	width: '68%'
})
const paramContainer = ref()
let paramEditor = null

const run = async (params) => {
	//正在运行中，就不要运行了
	if (config.value.running) {
		message.info('正在运行中，请勿重复运行')
		return
	}
	if (!props.lf) {
		return;
	}
	await transResumeAll()

	await nodePauseCheckAndSet()

	if (props.lf) {
		props.lf.clearBuffs()
	}


	//先关闭 一把
	closeSession();

	await connectTestWebSocket()

	//设置运行状态
	config.value.running = true
	if (params) {
		paramEditor.setValue(params)
	}

	let c = paramEditor.getValue()

	var par = {
		type: 'run',
		id: props.lf.id,
		// processVersion: props.version,
		param: c
	}
	//日志清空
	processLogView.value.clearLog();
	// props.mockRun()
	config.value.ws.send('runStep', SocketD.newEntity(JSON.stringify(par)))
}

const nodePauseCheckAndSet = async () => {
	let nodeIds = props.lf.getNodeBuffByName('pause')

	if (!nodeIds || nodeIds.length <= 0) {
		return
	}

	for (let nodeId of nodeIds) {
		const s = await processTestApi.stepPause({
			id: props.lf.id,
			tid: config.value.tid,
			stepId: nodeId
		})
	}
}

onMounted(() => {
	propsToConfig()
	initparamEditor()
	setDefaultParamValue()
})
const propsToConfig = () => {
	if (props.config) {
		config.value = {
			...config.value,
			...props.config
		}
	}

	if (config.value.logContainerConfig?.width) {
		logCardStyle.value.width = config.value.logContainerConfig.width
	}

	// if (config.value.logContainerConfig?.height) {
	// 	logCardStyle.value.height = config.value.logContainerConfig.height
	// }
}

const setDefaultParamValue = async () => {
	if (!paramEditor) {
		return
	}
	if (!props.lf?.id) {
		return
	}
	let value = paramEditor.getValue()
	if (value) {
		return
	}
	const graphData = props.lf?.getGraphData()

	//需要调用后端查询接口定义
	const read = await processVersionContentApi.getProcessEventInputDefine({
		id: props.lf.id,
		frontFile: graphData
	})
	let define = parseDefineToJson(read)
	if (!define) {
		define = {
			a: ''
		}
	}
	paramEditor.setValue(JSON.stringify(define, null, 2))
}

const resetParamFunc = () => {
	paramEditor.setValue('')
	setDefaultParamValue()
}

const connectTestWebSocket = async () => {
	if (null != config.value.ws) {
		return
	}
	if (!config.value.tid) {
		config.value.tid = await processTestApi.getTid({})
	}
	//建立连接
	config.value.ws = await Ws(
		config.value.tid,
		(d) => {
			processLogView.value.appendLog(d);
			if (d.type == 'result') {
				config.value.running = false
				transResumeAll()
			} else if (d.type == 'error') {
				config.value.running = false
				transResumeAll()
			}
		},
		() => {
			config.value.running = false
			console.log('报错了啊')
			//恢复所有
			transResumeAll()
		}
	)
}


const resume = async () => {
	const s = await processTestApi.stepResume({
		id: props.lf.id,
		tid: config.value.tid
	})
	// this.removePause();
}

const resumeAll = async () => {
	props.lf.removeBuffNameAll('pause')
	await transResumeAll()
	const s = await processTestApi.resumeAll({
		id: props.lf.id
	})
}

const transResumeAll = async () => {
	if (!props.lf?.id) {
		return
	}
	await processTestApi.transResumeAll({
		id: props.lf.id,
		tid: config.value.tid
	})
}


const initparamEditor = async () => {
	monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
		validate: false
	})

	let cb = ''
	paramEditor = monaco.editor.create(paramContainer.value, {
		theme: 'vs-dark', // 主题
		value: cb, // 默认显示的值
		language: 'json',
		folding: true, // 是否折叠
		foldingHighlight: true, // 折叠等高线
		foldingStrategy: 'indentation', // 折叠方式  auto | indentation
		showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
		disableLayerHinting: true, // 等宽优化
		emptySelectionClipboard: false, // 空选择剪切板
		selectionClipboard: false, // 选择剪切板
		automaticLayout: true, // 自动布局
		codeLens: false, // 代码镜头
		scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
		colorDecorators: true, // 颜色装饰器
		accessibilitySupport: 'off', // 辅助功能支持  "auto" | "off" | "on"
		lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
		lineNumbersMinChars: 5, // 行号最小字符   number
		enableSplitViewResizing: false,
		readOnly: false //是否只读  取值 true | false
	})
}

const closeSession = () => {
	if (config.value.ws) {
		config.value.ws.close();
	}
	config.value.tid = null;
	processLogView.value.clearLog();
	config.value.ws = null;
}
defineExpose({
	openRunDraw,
	closeSession
})
</script>

<style scoped lang=scss>
::v-deep(.tiny-drawer__header) {
	padding: 0 !important;
	margin-right: 0 !important;
}

::v-deep(.drawer-body) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.tiny-drawer {
	height: 50px;
}

:deep(.ant-card-body) {
	height: 100% !important;
	padding:0 !important;
}
</style>
